<template>
  <h1>隐藏显示指令</h1>
  <!--  v-if="布尔值" v-show="布尔值"
  true元素出现 false 元素消失 区别：
  前者消失的元素会直接跳过渲染，doM树没有次元素
  后者是通过CSS属性display：none 让元素消失-->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <!--  v-else会找离他最近的v-if进行取反 -->
  <p v-else>王五</p>
  <hr>
  <p v-show="true">小红</p>
  <p v-show="false">小绿</p>
  <hr>
  <p v-if="isShow">太阳</p>
  <p v-else>月亮</p>
</template>
<script setup>
import {ref} from "vue";

const isShow=ref(true)
</script>


<style scoped>

</style>